<template>
  <div class="searchlist">
    <div class="hotsearchlist clear">
      <p>热门搜索</p>
      <button
        v-for="item in SearchList"
        :key="item.id"
        @click="search(item.first)"
      >
        {{ item.first }}
      </button>
    </div>
  </div>
</template>

<script>
import { searchMusicList } from "@/api/Search";
import { hotSearchList } from "@/api/Search";
export default {
  data() {
    return {
      SearchList: [],
      List: [],
    };
  },
  methods: {
    search(val) {
      this.$store.commit("changeSearchWorld", val);
      this.$store.commit("changeIsSearchShow", false);
      this.$store.commit("changeIsShow", false);
      this.$store.commit("changeIsblock", true);
        searchMusicList(val).then((res) => {
          this.List = res.data.result.songs;
          // 扔去vuex
          this.$store.dispatch("searchMusicList", this.List);
        });
     
    },
  },
  created: function () {
    hotSearchList().then((res) => {
      this.SearchList = res.data.result.hots;
    });
  },
};
</script>

<style lang="scss" scoped>
.searchlist {
  border-top: 1px solid #eee;
  .hotsearchlist {
    padding: vw(10);
    p {
      font-size: vw(24);
      color: #666;
      margin-bottom: vw(15);
    }
    button {
      background-color: #fff;
      outline: none;
      float: left;
      padding: 0 3.73333vw;
      font-size: vw(26);
      line-height: 2em;
      border: 1px solid #eee;
      display: block;
      margin-left: 2.66667vw;
      margin-bottom: 2.66667vw;
      border-radius: 3.73333vw;
      color: #000;
    }
  }
}
</style>